<template>
	<view class="mask flex-center">
		<fui-landscape :show="isShow && !isObjectEmpty(notice||{})" :position="3" @close="closePopup" maskBackground="transparent" :closable="false">
			<view class="fui-ani__box">
				<view class="fui-flex--center">
					<text class="fui-ani__title">{{notice?.title||'公告'}}</text>
					<text class="fui-desc">
						<rich-text :nodes="notice?.content"></rich-text>
					</text>
					<view style="display: flex;justify-content: space-between;width: 85%;margin-top: 20rpx;">
						<fui-button btn-size="small" radius="100rpx" borderColor="#fd5531" color="#fd5531" background="#fff" border-width="1px" text="不在提醒" @click="onhint"></fui-button>
						<fui-button btn-size="small" radius="100rpx" background="linear-gradient(to right top, #ff6f49, #ff5a5e)" borderColor="rgba(0,0,0,0)" border-width="0" text="我知道了" @click="btnClick"></fui-button>
					</view>
				</view>
			</view>
		</fui-landscape>
	</view>
</template>

<script setup>
	import { ConfigStore } from "@/store/modules/config.js";
	import { ref, reactive, computed } from 'vue'
	import { onLoad } from "@dcloudio/uni-app";
	const notice = computed(() => ConfigStore()?.notice[0])

	function isObjectEmpty(obj) {
		return Object.keys(obj).length === 0;
	}
	const isShow = ref(true)
	const closePopup = () => {
		isShow.value = false
	}
	// 知道了
	const btnClick = () => {
		closePopup()
		uni.navigateBack()
	}
	// 不在提示
	const onhint = () => {
		ConfigStore().displayNotice("不在提醒")
		closePopup()
		uni.navigateBack()
	}
</script>

<style>
	page {
		background: transparent;
	}

	.flex-center {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		justify-content: center;
		align-items: center;
	}

	.mask {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, .65);
	}

	.fui-page__bd {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.fui-ani__box {
		width: 640rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding-bottom: 64rpx;
	}

	.fui-hd__img {
		/* #ifndef APP-NVUE */
		width: 100%;
		display: block;
		/* #endif */
		/* #ifdef APP-NVUE */
		width: 640rpx;
		/* #endif */
		height: 192rpx;
	}

	.fui-ani__title {
		font-size: 36rpx;
		font-weight: 600;
		padding: 54rpx 0 32rpx;
		text-align: center;
	}

	.fui-desc {
		max-height: 600rpx;
		overflow: hidden;
		overflow-y: scroll;
		padding: 0 54rpx 82rpx;
		font-size: 24rpx;
		line-height: 48rpx;
		font-weight: 400;
		color: #333333;
		/* #ifndef APP-NVUE */
		box-sizing: border-box;
		/* #endif */
	}

	.fui-flex--center {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		flex-direction: column;
	}
</style>